<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="产品SKU" prop="sku">
        <el-input
          v-model="queryParams.sku"
          placeholder="请输入产品SKU"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['depot:localInventory:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['depot:localInventory:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['depot:localInventory:remove']">删除</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['depot:localInventory:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="localInventoryList"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <!-- 固定列 -->
      <!-- <el-table-column type="selection" width="55" align="center" fixed="left" /> -->
      <!-- <el-table-column label="产品图片" prop="productImage" align="center" fixed="left" width="200">
        <template slot-scope="scope">
          <div class="image-container">
            <image-preview v-for="(image, index) in scope.row.productImage" :key="index" :src="image" :width="50"
              :height="50" class="image-item" />
          </div>
        </template>
</el-table-column> -->
      <el-table-column
        label="产品图片"
        align="center"
        prop="productImage"
        fixed="left"
        width="200"
      >
        <template slot-scope="scope">
          <div class="image-container">
            <!-- 如果有图片，显示图片；如果没有图片，显示 '-' -->
            <template
              v-if="scope.row.productImage && scope.row.productImage.length > 0"
            >
              <image-preview
                v-for="(image, index) in scope.row.productImage"
                :key="index"
                :src="image"
                :width="50"
                :height="50"
                class="image-item"
              />
            </template>
            <template v-else> - </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="产品名称"
        align="center"
        prop="productName"
        fixed="left"
        width="180"
      />
      <el-table-column
        label="产品SKU"
        align="center"
        prop="sku"
        fixed="left"
        width="150"
      />
      <el-table-column
        label="仓库名称"
        align="center"
        prop="warehouseName"
        fixed="left"
        width="180"
      />
      <el-table-column
        label="产品总成本"
        align="center"
        fixed="left"
        width="180"
      >
        <template #default="{ row }">
          {{
            row.productTotalStockCost == null
              ? "-"
              : (+row.productTotalStockCost).toFixed(3)
          }}
        </template>
      </el-table-column>

      <!-- 可滚动列 -->
      <el-table-column
        label="实际总量"
        align="center"
        prop="totalActualQuantity"
        width="120"
      />

      <!-- 可点击的数量字段 -->
      <el-table-column
        label="可用量 (可销售库存)"
        align="center"
        prop="availableQuantity"
        width="150"
      >
        <template slot-scope="scope">
          <el-link type="primary">
            {{ scope.row.availableQuantity }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column
        label="预留量/锁定量"
        align="center"
        prop="totalLockedQuantity"
        width="150"
      >
        <template slot-scope="scope">
          <div
            style="
              display: flex;
              align-items: center;
              gap: 8px;
              justify-content: center;
            "
          >
            <!-- 预留量（可点击修改），添加下划线，并显示标题 -->
            <el-tooltip content="预留量（可点击修改）" placement="top">
              <el-link
                type="primary"
                @click="openReservedQuantityDialog(scope.row)"
                v-hasPermi="['depot:localInventory:rqEdit']"
                style="text-decoration: underline"
              >
                {{ scope.row.totalLockedQuantity }}
              </el-link>
            </el-tooltip>

            <!-- 图标按钮，点击弹出日志 -->
            <el-tooltip content="查看变动记录" placement="top">
              <el-button
                type="text"
                icon="el-icon-view"
                @click="clickLogDialog(scope.row)"
              ></el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="次品量"
        align="center"
        prop="totalDefectiveQuantity"
        width="120"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openDefectiveQuantityDialog(scope.row)"
            class="textdecoration"
          >
            {{ scope.row.totalDefectiveQuantity }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column
        label="待检量"
        align="center"
        prop="totalInspectionQuantity"
        width="120"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openInspectionQuantityDialog(scope.row)"
            class="textdecoration"
          >
            {{ scope.row.totalInspectionQuantity }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column
        label="待到货量"
        align="center"
        prop="totalArrivedQuantity"
        width="120"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openArrivedQuantityDialog(scope.row)"
            class="textdecoration"
          >
            {{ scope.row.totalArrivedQuantity }}
          </el-link>
        </template>
      </el-table-column>
      <!-- 添加库龄列 -->
      <el-table-column
        label="0-30天的库存量"
        align="center"
        prop="stockAge030"
        width="120"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openStockAgeDialog(scope.row, 0, 30)"
            class="textdecoration"
          >
            {{ scope.row.stockAge030 }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="31-60天的库存量"
        align="center"
        prop="stockAge3160"
        width="120"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openStockAgeDialog(scope.row, 31, 60)"
            class="textdecoration"
          >
            {{ scope.row.stockAge3160 }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="61-90天的库存量"
        align="center"
        prop="stockAge6190"
        width="120"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openStockAgeDialog(scope.row, 61, 90)"
            class="textdecoration"
          >
            {{ scope.row.stockAge6190 }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="91-180天的库存量"
        align="center"
        prop="stockAge91180"
        width="150"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openStockAgeDialog(scope.row, 91, 180)"
            class="textdecoration"
          >
            {{ scope.row.stockAge91180 }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="181-270天的库存量"
        align="center"
        prop="stockAge181270"
        width="150"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openStockAgeDialog(scope.row, 181, 270)"
            class="textdecoration"
          >
            {{ scope.row.stockAge181270 }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="271-330天的库存量"
        align="center"
        prop="stockAge271330"
        width="150"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openStockAgeDialog(scope.row, 271, 330)"
            class="textdecoration"
          >
            {{ scope.row.stockAge271330 }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="331-365天的库存量"
        align="center"
        prop="stockAge331365"
        width="150"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openStockAgeDialog(scope.row, 331, 365)"
            class="textdecoration"
          >
            {{ scope.row.stockAge331365 }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="超过366天的库存量"
        align="center"
        prop="stockAge366Plus"
        width="150"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="openStockAgeDialog(scope.row, 366, null)"
            class="textdecoration"
          >
            {{ scope.row.stockAge366Plus }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 次品量详情弹窗 -->
    <el-dialog
      title="次品量详情"
      :visible.sync="defectiveQuantityDialogVisible"
      width="80%"
      @close="defectiveQuantityDialogVisible = false"
    >
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="defectiveQueryParams" class="mb16">
        <el-form-item label="采购单号">
          <el-input
            v-model="defectiveQueryParams.ordersNumber"
            placeholder="请输入采购单号"
            clearable
            @keyup.enter.native="handleDefectiveSearch"
          />
        </el-form-item>
        <el-form-item label="质检单号">
          <el-input
            v-model="defectiveQueryParams.qualityCode"
            placeholder="请输入质检单号"
            clearable
            @keyup.enter.native="handleDefectiveSearch"
          />
        </el-form-item>
        <el-form-item label="质检员">
          <el-input
            v-model="defectiveQueryParams.inspector"
            placeholder="请输入质检人"
            clearable
            @keyup.enter.native="handleDefectiveSearch"
          />
        </el-form-item>
        <el-form-item label="采购批次号">
          <el-input
            v-model="defectiveQueryParams.purchaseBatchNumber"
            placeholder="请输入采购批次号"
            clearable
            @keyup.enter.native="handleDefectiveSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleDefectiveSearch"
            >搜索</el-button
          >
          <el-button @click="handleDefectiveReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="defectiveQuantityDetails" style="width: 100%">
        <el-table-column
          label="产品图片"
          prop="productImagePath"
          min-width="150"
        >
          <template slot-scope="scope">
            <div class="image-container">
              <!-- 如果有图片，显示图片；如果没有图片，显示 '-' -->
              <template
                v-if="
                  scope.row.productImagePath &&
                  scope.row.productImagePath.length > 0
                "
              >
                <image-preview
                  v-for="(image, index) in scope.row.productImagePath"
                  :key="index"
                  :src="image"
                  :width="50"
                  :height="50"
                  class="image-item"
                />
              </template>
              <template v-else> - </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" prop="productName" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.productName || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="采购单号" prop="ordersNumber" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.ordersNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="采购批次号"
          prop="purchaseBatchNumber"
          min-width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.purchaseBatchNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="质检单号" prop="qualityCode" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.qualityCode || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="质检日期" prop="inspectionDate" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.inspectionDate || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="质检员" prop="inspector" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.inspector || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="质检数量"
          prop="inspectedQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.inspectedQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="质检方式" prop="inspectionType">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.tb_quality_inspection_type"
              :value="scope.row.inspectionType"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="抽检数量"
          prop="samplingQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{
              scope.row.inspectionType !== 0
                ? "-"
                : scope.row.samplingQuantity || "-"
            }}
          </template>
        </el-table-column>
        <el-table-column label="抽样比例" prop="samplingRatio" min-width="120">
          <template slot-scope="scope">
            {{
              scope.row.inspectionType !== 0
                ? "-"
                : scope.row.samplingRatio
                ? scope.row.samplingRatio + "%"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="抽样合格率"
          prop="samplingPassRate"
          min-width="150"
        >
          <template slot-scope="scope">
            {{
              scope.row.inspectionType !== 0
                ? "-"
                : scope.row.samplingPassRate
                ? scope.row.samplingPassRate + "%"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="次品数量"
          prop="defectiveQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.defectiveQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="良品数量" prop="passQuantity" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.passQuantity || "-" }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        style="margin-top: 16px; text-align: right"
        @current-change="handleDefectivePageChange"
        :current-page="defectiveQueryParams.pageNum"
        :page-size="defectiveQueryParams.pageSize"
        :total="defectiveTotal"
        layout="total, prev, pager, next, sizes"
        :page-sizes="[10, 20, 50, 100]"
      >
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="defectiveQuantityDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <!-- 待检量详情弹窗 -->
    <el-dialog
      title="待检量详情"
      :visible.sync="inspectionQuantityDialogVisible"
      width="80%"
      @close="inspectionQuantityDialogVisible = false"
    >
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="inspectionQueryParams" class="mb16">
        <el-form-item label="收货人">
          <el-input
            v-model="inspectionQueryParams.consignee"
            placeholder="请输入收货人"
            clearable
            @keyup.enter.native="handleInspectionSearch"
          />
        </el-form-item>
        <el-form-item label="收货单号">
          <el-input
            v-model="inspectionQueryParams.receiptNumber"
            placeholder="请输入收货单号"
            clearable
            @keyup.enter.native="handleInspectionSearch"
          />
        </el-form-item>
        <el-form-item label="采购单号">
          <el-input
            v-model="inspectionQueryParams.ordersNumber"
            placeholder="请输入采购单号"
            clearable
            @keyup.enter.native="handleInspectionSearch"
          />
        </el-form-item>
        <el-form-item label="采购批次号">
          <el-input
            v-model="inspectionQueryParams.purchaseBatchNumber"
            placeholder="请输入采购批次号"
            clearable
            @keyup.enter.native="handleInspectionSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleInspectionSearch"
            >搜索</el-button
          >
          <el-button @click="handleInspectionReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 待检量表格 -->
      <el-table
        :data="inspectionQuantityDetails"
        v-loading="inspectionLoading"
        style="width: 100%"
      >
        <el-table-column
          label="产品图片"
          prop="productImagePath"
          min-width="150"
        >
          <template slot-scope="scope">
            <div class="image-container">
              <template
                v-if="
                  scope.row.productImagePath &&
                  scope.row.productImagePath.length > 0
                "
              >
                <image-preview
                  v-for="(image, index) in scope.row.productImagePath"
                  :key="index"
                  :src="image"
                  :width="50"
                  :height="50"
                  class="image-item"
                />
              </template>
              <template v-else> - </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" prop="productName" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.productName || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="收货人" prop="consignee" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.consignee || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="收货时间" prop="receiptTime" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.receiptTime || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="收货单号" prop="receiptNumber" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.receiptNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="采购单号" prop="ordersNumber" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.ordersNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="采购批次号"
          prop="purchaseBatchNumber"
          min-width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.purchaseBatchNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="收货数量"
          prop="receiptQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.receiptQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="采购数量"
          prop="transferableNumber"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.transferableNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="未检数量" prop="notInspected" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.notInspected || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="质检数量"
          prop="qualityInspection"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.qualityInspection || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="已检数量"
          prop="checkedQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.checkedQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="可用数量"
          prop="availableQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.availableQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="次品数量"
          prop="defectiveQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.defectiveQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="质检状态" prop="qualityStatus">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.tb_quality_inspection_status"
              :value="scope.row.qualityStatus"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        style="margin-top: 16px; text-align: right"
        @current-change="handleInspectionPageChange"
        :current-page="inspectionQueryParams.pageNum"
        :page-size="inspectionQueryParams.pageSize"
        :total="inspectionTotal"
        layout="total, prev, pager, next, sizes"
        :page-sizes="[10, 20, 50, 100]"
      >
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="inspectionQuantityDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <!-- 待到货量详情弹窗 -->
    <el-dialog
      title="待到货量详情"
      :visible.sync="arrivedQuantityDialogVisible"
      width="80%"
      @close="arrivedQuantityDialogVisible = false"
    >
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="arrivedQueryParams" class="mb16">
        <el-form-item label="采购单号">
          <el-input
            v-model="arrivedQueryParams.ordersNumber"
            placeholder="请输入订单号"
            clearable
            @keyup.enter.native="handleArrivedSearch"
          />
        </el-form-item>
        <el-form-item label="采购员">
          <el-input
            v-model="arrivedQueryParams.approver"
            placeholder="请输入采购人"
            clearable
            @keyup.enter.native="handleArrivedSearch"
          />
        </el-form-item>
        <el-form-item label="采购批次号">
          <el-input
            v-model="arrivedQueryParams.purchaseBatchNumber"
            placeholder="请输入采购批次号"
            clearable
            @keyup.enter.native="handleArrivedSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleArrivedSearch"
            >搜索</el-button
          >
          <el-button @click="handleArrivedReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 待到货量表格 -->
      <el-table
        :data="arrivedQuantityDetails"
        v-loading="arrivedLoading"
        style="width: 100%"
      >
        <el-table-column
          label="产品图片"
          prop="productImagePath"
          min-width="150"
        >
          <template slot-scope="scope">
            <div class="image-container">
              <template
                v-if="
                  scope.row.productImagePath &&
                  scope.row.productImagePath.length > 0
                "
              >
                <image-preview
                  v-for="(image, index) in scope.row.productImagePath"
                  :key="index"
                  :src="image"
                  :width="50"
                  :height="50"
                  class="image-item"
                />
              </template>
              <template v-else> - </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" prop="productName" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.productName || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="采购员" prop="approver" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.approver || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="采购时间" prop="approvedTime" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.approvedTime || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="采购单号" prop="ordersNumber" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.ordersNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="采购批次号"
          prop="purchaseBatchNumber"
          min-width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.purchaseBatchNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="采购数量"
          prop="transferableNumber"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.transferableNumber || "-" }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="入库状态" prop="inboundStatus">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.inbound_status" :value="scope.row.inboundStatus" />
          </template>
        </el-table-column> -->
        <el-table-column label="入库数量" prop="storageNumber" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.storageNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="待到货数量" prop="waitingStock" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.waitingStock || "-" }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        style="margin-top: 16px; text-align: right"
        @current-change="handleArrivedPageChange"
        :current-page="arrivedQueryParams.pageNum"
        :page-size="arrivedQueryParams.pageSize"
        :total="arrivedTotal"
        layout="total, prev, pager, next, sizes"
        :page-sizes="[10, 20, 50, 100]"
      >
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="arrivedQuantityDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <!-- 添加库龄详情弹窗 -->
    <el-dialog
      title="库龄详情"
      :visible.sync="stockAgeDialogVisible"
      width="80%"
      @close="stockAgeDialogVisible = false"
    >
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="stockAgeQueryParams" class="mb16">
        <el-form-item label="采购单号">
          <el-input
            v-model="stockAgeQueryParams.ordersNumber"
            placeholder="请输入采购单号"
            clearable
            @keyup.enter.native="handleStockAgeSearch"
          />
        </el-form-item>
        <el-form-item label="入库批次">
          <el-input
            v-model="stockAgeQueryParams.storageNumber"
            placeholder="请输入入库单号"
            clearable
            @keyup.enter.native="handleStockAgeSearch"
          />
        </el-form-item>
        <el-form-item label="采购批次号">
          <el-input
            v-model="stockAgeQueryParams.purchaseBatchNumber"
            placeholder="请输入采购批次号"
            clearable
            @keyup.enter.native="handleStockAgeSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleStockAgeSearch"
            >搜索</el-button
          >
          <el-button @click="handleStockAgeReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 库龄详情表格 -->
      <el-table
        :data="stockAgeDetails"
        v-loading="stockAgeLoading"
        style="width: 100%"
      >
        <el-table-column label="产品图片" prop="productImages" min-width="150">
          <template slot-scope="scope">
            <div class="image-container">
              <template
                v-if="
                  scope.row.productImages && scope.row.productImages.length > 0
                "
              >
                <image-preview
                  v-for="(image, index) in scope.row.productImages"
                  :key="index"
                  :src="image"
                  :width="50"
                  :height="50"
                  class="image-item"
                />
              </template>
              <template v-else> - </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" prop="productName" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.productName || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="采购单号" prop="ordersNumber" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.ordersNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="入库单号/入库批次"
          prop="storageNumber"
          min-width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.storageNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="采购批次号"
          prop="purchaseBatchNumber"
          min-width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.purchaseBatchNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="入库时间" prop="inboundTime" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.inboundTime || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="产品SKU" prop="sku" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.sku || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price" min-width="120">
          <template slot-scope="scope">
            {{
              scope.row.price !== null ? `${scope.row.price.toFixed(2)}` : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="单品成本"
          prop="singleProductCost"
          min-width="150"
        >
          <template slot-scope="scope">
            {{
              scope.row.singleProductCost !== null
                ? `${scope.row.singleProductCost.toFixed(2)}`
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column label="实际数量" prop="actualQuantity" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.actualQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="良品数量" prop="goodQuantity" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.goodQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="次品数量"
          prop="defectiveQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.defectiveQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="待检数量"
          prop="waitingQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.waitingQuantity || "-" }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        style="margin-top: 16px; text-align: right"
        @current-change="handleStockAgePageChange"
        :current-page="stockAgeQueryParams.pageNum"
        :page-size="stockAgeQueryParams.pageSize"
        :total="stockAgeTotal"
        layout="total, prev, pager, next, sizes"
        :page-sizes="[10, 20, 50, 100]"
      >
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="stockAgeDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 预留量/锁定量弹窗 -->
    <el-dialog
      :title="titleReservedQuantity"
      :visible.sync="openReservedQuantity"
      width="550px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div style="margin-bottom: 10px">
        <p>
          原预留量/锁定量：<span style="font-weight: 600; font-size: 16px">{{
            rqSelectedRow.totalLockedQuantity
          }}</span>
        </p>
        <p>
          可用量：<span style="font-weight: 600; font-size: 16px">{{
            rqSelectedRow.availableQuantity
          }}</span>
        </p>
      </div>

      <el-input
        v-model="newLockedQuantity"
        placeholder="请输入新的预留量"
        type="number"
        @input="validateLockedQuantity"
      ></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="openReservedQuantity = false">取消</el-button>
        <el-button type="primary" @click="confirmLockedQuantity"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 添加库龄详情弹窗 -->
    <el-dialog
      title="库龄详情"
      :visible.sync="stockAgeDialogVisible"
      width="80%"
      @close="stockAgeDialogVisible = false"
    >
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="stockAgeQueryParams" class="mb16">
        <el-form-item label="采购单号">
          <el-input
            v-model="stockAgeQueryParams.ordersNumber"
            placeholder="请输入采购单号"
            clearable
            @keyup.enter.native="handleStockAgeSearch"
          />
        </el-form-item>
        <el-form-item label="入库批次">
          <el-input
            v-model="stockAgeQueryParams.storageNumber"
            placeholder="请输入入库单号"
            clearable
            @keyup.enter.native="handleStockAgeSearch"
          />
        </el-form-item>
        <el-form-item label="采购批次号">
          <el-input
            v-model="stockAgeQueryParams.purchaseBatchNumber"
            placeholder="请输入采购批次号"
            clearable
            @keyup.enter.native="handleStockAgeSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleStockAgeSearch"
            >搜索</el-button
          >
          <el-button @click="handleStockAgeReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 库龄详情表格 -->
      <el-table
        :data="stockAgeDetails"
        v-loading="stockAgeLoading"
        style="width: 100%"
      >
        <el-table-column label="产品图片" prop="productImages" min-width="150">
          <template slot-scope="scope">
            <div class="image-container">
              <template
                v-if="
                  scope.row.productImages && scope.row.productImages.length > 0
                "
              >
                <image-preview
                  v-for="(image, index) in scope.row.productImages"
                  :key="index"
                  :src="image"
                  :width="50"
                  :height="50"
                  class="image-item"
                />
              </template>
              <template v-else> - </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" prop="productName" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.productName || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="采购单号" prop="ordersNumber" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.ordersNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="入库单号/入库批次"
          prop="storageNumber"
          min-width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.storageNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="采购批次号"
          prop="purchaseBatchNumber"
          min-width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.purchaseBatchNumber || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="入库时间" prop="inboundTime" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.inboundTime || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="产品SKU" prop="sku" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.sku || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price" min-width="120">
          <template slot-scope="scope">
            {{
              scope.row.price !== null ? `${scope.row.price.toFixed(2)}` : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="单品成本"
          prop="singleProductCost"
          min-width="150"
        >
          <template slot-scope="scope">
            {{
              scope.row.singleProductCost !== null
                ? `${scope.row.singleProductCost.toFixed(2)}`
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column label="实际数量" prop="actualQuantity" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.actualQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="良品数量" prop="goodQuantity" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.goodQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="次品数量"
          prop="defectiveQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.defectiveQuantity || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          label="待检数量"
          prop="waitingQuantity"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.waitingQuantity || "-" }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        style="margin-top: 16px; text-align: right"
        @current-change="handleStockAgePageChange"
        :current-page="stockAgeQueryParams.pageNum"
        :page-size="stockAgeQueryParams.pageSize"
        :total="stockAgeTotal"
        layout="total, prev, pager, next, sizes"
        :page-sizes="[10, 20, 50, 100]"
      >
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="stockAgeDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 预留量/锁定量弹窗 -->
    <el-dialog
      :title="titleLogDialog"
      :visible.sync="openLogDialog"
      width="1300px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-table
        v-loading="logDialogloading"
        :data="reservedList"
        style="width: 100%"
        :height="500"
      >
        <el-table-column
          label="产品名称"
          align="center"
          prop="productName"
          fixed="left"
          width="195"
        />
        <el-table-column
          label="SKU"
          align="center"
          prop="sku"
          fixed="left"
          width="150"
        />
        <el-table-column
          label="变动差异"
          align="center"
          prop="quantity"
          fixed="left"
          width="150"
        >
          <template slot-scope="scope">
            <span :class="getQuantityCellStyleAndContent(scope.row).styleClass">
              {{ getQuantityCellStyleAndContent(scope.row).displayContent }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="旧预留量/锁定量"
          align="center"
          prop="reservedQuantityOld"
          fixed="left"
          width="150"
        />
        <el-table-column
          label="新预留量/锁定量"
          align="center"
          prop="reservedQuantityNew"
          fixed="left"
          width="150"
        />
        <el-table-column
          label="变动人员"
          align="center"
          prop="createdBy"
          fixed="left"
          width="150"
        />
        <el-table-column
          label="变动时间"
          align="center"
          prop="createdTime"
          fixed="left"
          width="150"
        />
        <el-table-column
          label="仓库名称"
          align="center"
          prop="warehouseName"
          fixed="left"
          width="150"
        />
      </el-table>
      <pagination
        v-show="totalLogDialog > 0"
        :total="totalLogDialog"
        :page.sync="logDialogQueryParams.pageNum"
        :limit.sync="logDialogQueryParams.pageSize"
        @pagination="getReservedList"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="openLogDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listLocalInventory,
  getLocalInventory,
  delLocalInventory,
  addLocalInventory,
  updateLocalInventory,
  getDefectiveQuantityDetails,
  getInspectionQuantityDetails,
  getArrivedQuantityDetails,
  getStockAgeDetails,
  updateReservedQuantity,
  getReservedList,
} from "@/api/depot/localInventory";

export default {
  name: "LocalInventory",
  dicts: [
    "tb_quality_inspection_type",
    "tb_quality_inspection_status",
    "inbound_status",
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 库存表格数据
      localInventoryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sku: null,
        warehouseId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        sku: [{ required: true, message: "产品SKU不能为空", trigger: "blur" }],
        warehouseId: [
          { required: true, message: "仓库ID不能为空", trigger: "change" },
        ],
      },
      // 预留量/锁定量详情对话框相关数据
      reservedQuantityDialogVisible: false,
      reservedQuantityDetails: [],

      // 次品量详情对话框相关数据
      defectiveQuantityDialogVisible: false,
      defectiveQuantityDetails: [],
      defectiveQueryParams: {
        pageNum: 1,
        pageSize: 10,
        ordersNumber: "",
        qualityCode: "",
        inspector: "",
        purchaseBatchNumber: "",
      },
      defectiveTotal: 0,
      defectiveLoading: false,
      currentProductId: null, // 用于存储打开弹窗的产品id，作用弹窗生命周期

      // 待检量详情对话框相关数据
      inspectionQuantityDialogVisible: false,
      inspectionQuantityDetails: [],
      inspectionQueryParams: {
        pageNum: 1,
        pageSize: 10,
        consignee: "",
        receiptNumber: "",
        ordersNumber: "",
        purchaseBatchNumber: "",
        productId: null, // 包含 productId
      },
      inspectionTotal: 0,
      inspectionLoading: false,
      currentInspectionProductId: null, // 用于存储打开弹窗的产品id

      // 待到货量详情对话框相关数据
      arrivedQuantityDialogVisible: false,
      arrivedQuantityDetails: [],
      arrivedQueryParams: {
        pageNum: 1,
        pageSize: 10,
        ordersNumber: "",
        approver: "",
        purchaseOrderNumber: "",
        purchaseBatchNumber: "",
        productId: null, // 包含 productId
      },
      arrivedTotal: 0,
      arrivedLoading: false,
      currentArrivedProductId: null, // 用于存储打开弹窗的产品id

      // 库龄详情弹窗相关数据
      stockAgeDialogVisible: false,
      stockAgeDetails: [],
      stockAgeQueryParams: {
        pageNum: 1,
        pageSize: 10,
        ordersNumber: "",
        storageNumber: "",
        purchaseBatchNumber: "",
        inboundTime: "",
        minDays: null,
        maxDays: null,
        productId: null,
      },
      stockAgeTotal: 0,
      stockAgeLoading: false,
      currentStockAgeProductId: null, // 用于存储打开弹窗的产品id
      currentStockAgeRange: { minDays: 0, maxDays: 30 }, // 默认库龄范围

      //预留量/锁定量
      openReservedQuantity: false,
      titleReservedQuantity: "修改预留量/锁定量",
      rqSelectedRow: {}, // 存储当前选中的行数据
      newLockedQuantity: null, // 输入的新预留量
      reservedList: [], //预留量/锁定量数据
      logDialogloading: false,
      titleLogDialog: "",
      openLogDialog: false,
      totalLogDialog: 0,
      logDialogQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 定义变动数量增加时的样式类名
      increaseStyleClass: "text-green",
      // 定义变动数量减少时的样式类名
      decreaseStyleClass: "text-red",
    };
  },
  computed: {
    getQuantityCellStyleAndContent() {
      return (row) => {
        const diff = row.reservedQuantityNew - row.reservedQuantityOld;
        if (diff < 0) {
          return {
            styleClass: this.decreaseStyleClass,
            displayContent: `-${diff}`,
          };
        } else if (diff > 0) {
          return {
            styleClass: this.increaseStyleClass,
            displayContent: `+${Math.abs(diff)}`,
          };
        }
        return {
          styleClass: "",
          displayContent: "",
        };
      };
    },
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询库存列表 */
    getList() {
      this.loading = true;
      listLocalInventory(this.queryParams).then((response) => {
        this.localInventoryList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        inventoryId: null,
        sku: null,
        warehouseId: null,
        actualQuantity: null,
        availableQuantity: null,
        reservedQuantity: null,
        defectiveQuantity: null,
        inspectionQuantity: null,
        arrivedQuantity: null,
        stockAge30: null,
        stockAge60: null,
        stockAge90: null,
        createdAt: null,
        updatedAt: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.inventoryId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加库存";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const inventoryId = row.inventoryId || this.ids;
      getLocalInventory(inventoryId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改库存";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.inventoryId != null) {
            updateLocalInventory(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addLocalInventory(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const inventoryIds = row.inventoryId || this.ids;
      this.$modal
        .confirm('是否确认删除库存编号为"' + inventoryIds + '"的数据项？')
        .then(function () {
          return delLocalInventory(inventoryIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "depot/localInventory/export",
        {
          ...this.queryParams,
        },
        `localInventory_${new Date().getTime()}.xlsx`
      );
    },

    /** 打开预留量/锁定量详情对话框 */
    openReservedQuantityDialog(row) {
      this.rqSelectedRow = row;
      this.openReservedQuantity = true;
      // this.$modal.loading("正在加载预留量/锁定量详情...");
      // getReservedQuantityDetails(row.inventoryId).then(response => {
      //   this.reservedQuantityDetails = response.data;
      //   this.reservedQuantityDialogVisible = true;
      // }).catch(() => {
      //   this.$modal.msgError("加载预留量/锁定量详情失败");
      // }).finally(() => {
      //   this.$modal.closeLoading();
      // });
    },
    // 校验输入的新预留量，确保不超过 availableQuantity
    validateLockedQuantity() {
      if (this.newLockedQuantity > this.rqSelectedRow.availableQuantity) {
        this.$message.warning(
          `预留量/锁定量不能超过可用量：${this.rqSelectedRow.availableQuantity}`
        );
        this.newLockedQuantity = this.rqSelectedRow.availableQuantity; // 限制最大值
      }
      if (this.newLockedQuantity < 0) {
        this.$message.warning("预留量/锁定量不能小于 0");
        this.newLockedQuantity = 0; // 限制最小值
      }
    },
    // 点击确定按钮，提交修改
    confirmLockedQuantity() {
      if (this.newLockedQuantity === null || this.newLockedQuantity === "") {
        this.$message.error("请输入新的预留量/锁定量");
        return;
      }
      this.rqSelectedRow.reservedQuantity = Number(this.newLockedQuantity);
      updateReservedQuantity(this.rqSelectedRow)
        .then(() => {
          this.$message.success("预留量修改成功");
          this.getList();
        })
        .finally(() => {
          this.newLockedQuantity = "";
          this.openReservedQuantity = false; // 操作完成，启用按钮
        });
    },

    /** 打开次品量详情弹窗 */
    openDefectiveQuantityDialog(row) {
      this.defectiveQuantityDialogVisible = true;
      this.currentProductId = row.productId; // 设置当前 productId
      this.defectiveQueryParams = {
        pageNum: 1,
        pageSize: 10,
        ordersNumber: "",
        qualityCode: "",
        inspector: "",
        purchaseBatchNumber: "",
        productId: this.currentProductId, // 包含 productId
      };
      this.getDefectiveQuantityList();
    },

    /** 获取次品量详情列表 */
    getDefectiveQuantityList() {
      this.defectiveLoading = true;
      const params = {
        ...this.defectiveQueryParams,
      };
      getDefectiveQuantityDetails(params)
        .then((response) => {
          this.defectiveQuantityDetails = response.rows;
          this.defectiveTotal = response.total;
          this.defectiveLoading = false;
        })
        .catch(() => {
          this.$modal.msgError("加载次品量详情失败");
          this.defectiveLoading = false;
        });
    },

    /** 处理次品量弹窗的搜索 */
    handleDefectiveSearch() {
      this.defectiveQueryParams.pageNum = 1;
      this.getDefectiveQuantityList();
    },

    /** 处理次品量弹窗的重置 */
    handleDefectiveReset() {
      this.defectiveQueryParams = {
        pageNum: 1,
        pageSize: this.defectiveQueryParams.pageSize, // 保持 pageSize
        ordersNumber: "",
        qualityCode: "",
        inspector: "",
        purchaseBatchNumber: "",
        productId: this.currentProductId, // 保持 productId
      };
      this.getDefectiveQuantityList();
    },

    /** 处理次品量分页变化 */
    handleDefectivePageChange(page) {
      this.defectiveQueryParams.pageNum = page;
      this.getDefectiveQuantityList();
    },

    /** 打开待检量详情弹窗 */
    openInspectionQuantityDialog(row) {
      this.inspectionQuantityDialogVisible = true;
      this.currentInspectionProductId = row.productId; // 设置当前 productId
      this.inspectionQueryParams = {
        pageNum: 1,
        pageSize: 10,
        consignee: "",
        receiptNumber: "",
        ordersNumber: "",
        purchaseBatchNumber: "",
        productId: this.currentInspectionProductId, // 包含 productId
      };
      this.getInspectionQuantityList();
    },

    /** 获取待检量详情列表 */
    getInspectionQuantityList() {
      this.inspectionLoading = true;
      const params = {
        ...this.inspectionQueryParams,
      };
      getInspectionQuantityDetails(params)
        .then((response) => {
          this.inspectionQuantityDetails = response.rows;
          this.inspectionTotal = response.total;
          this.inspectionLoading = false;
        })
        .catch(() => {
          this.$modal.msgError("加载待检量详情失败");
          this.inspectionLoading = false;
        });
    },

    /** 处理待检量弹窗的搜索 */
    handleInspectionSearch() {
      this.inspectionQueryParams.pageNum = 1;
      this.getInspectionQuantityList();
    },

    /** 处理待检量弹窗的重置 */
    handleInspectionReset() {
      this.inspectionQueryParams = {
        pageNum: 1,
        pageSize: this.inspectionQueryParams.pageSize, // 保持 pageSize
        consignee: "",
        receiptNumber: "",
        ordersNumber: "",
        purchaseBatchNumber: "",
        productId: this.currentInspectionProductId, // 保持 productId
      };
      this.getInspectionQuantityList();
    },

    /** 处理待检量分页变化 */
    handleInspectionPageChange(page) {
      this.inspectionQueryParams.pageNum = page;
      this.getInspectionQuantityList();
    },

    /** 打开待到货量详情弹窗 */
    openArrivedQuantityDialog(row) {
      this.arrivedQuantityDialogVisible = true;
      this.currentArrivedProductId = row.productId; // 设置当前 productId
      this.arrivedQueryParams = {
        pageNum: 1,
        pageSize: 10,
        ordersNumber: "",
        approver: "",
        purchaseOrderNumber: "",
        purchaseBatchNumber: "",
        productId: this.currentArrivedProductId, // 包含 productId
      };
      this.getArrivedQuantityList();
    },

    /** 获取待到货量详情列表 */
    getArrivedQuantityList() {
      this.arrivedLoading = true;
      const params = {
        ...this.arrivedQueryParams,
      };
      getArrivedQuantityDetails(params)
        .then((response) => {
          this.arrivedQuantityDetails = response.rows;
          this.arrivedTotal = response.total;
          this.arrivedLoading = false;
        })
        .catch(() => {
          this.$modal.msgError("加载待到货量详情失败");
          this.arrivedLoading = false;
        });
    },

    /** 处理待到货量弹窗的搜索 */
    handleArrivedSearch() {
      this.arrivedQueryParams.pageNum = 1;
      this.getArrivedQuantityList();
    },

    /** 处理待到货量弹窗的重置 */
    handleArrivedReset() {
      this.arrivedQueryParams = {
        pageNum: 1,
        pageSize: this.arrivedQueryParams.pageSize, // 保持 pageSize
        ordersNumber: "",
        approver: "",
        purchaseOrderNumber: "",
        purchaseBatchNumber: "",
        productId: this.currentArrivedProductId, // 保持 productId
      };
      this.getArrivedQuantityList();
    },

    /** 处理待到货量分页变化 */
    handleArrivedPageChange(page) {
      this.arrivedQueryParams.pageNum = page;
      this.getArrivedQuantityList();
    },

    /** 打开库龄详情弹窗 */
    openStockAgeDialog(row, minDays, maxDays) {
      this.stockAgeDialogVisible = true;
      this.currentStockAgeProductId = row.productId;
      this.currentStockAgeRange = { minDays, maxDays };
      this.stockAgeQueryParams = {
        pageNum: 1,
        pageSize: 10,
        ordersNumber: "",
        storageNumber: "",
        purchaseBatchNumber: "",
        inboundTime: "",
        minDays,
        maxDays,
        productId: this.currentStockAgeProductId,
      };
      this.getStockAgeList();
    },

    /** 获取库龄详情列表 */
    getStockAgeList() {
      this.stockAgeLoading = true;
      const params = {
        ...this.stockAgeQueryParams,
      };
      getStockAgeDetails(params)
        .then((response) => {
          this.stockAgeDetails = response.rows;
          this.stockAgeTotal = response.total;
          this.stockAgeLoading = false;
        })
        .catch(() => {
          this.$modal.msgError("加载库龄详情失败");
          this.stockAgeLoading = false;
        });
    },

    /** 处理库龄弹窗的搜索 */
    handleStockAgeSearch() {
      this.stockAgeQueryParams.pageNum = 1;
      this.getStockAgeList();
    },

    /** 处理库龄弹窗的重置 */
    handleStockAgeReset() {
      this.stockAgeQueryParams = {
        pageNum: 1,
        pageSize: this.stockAgeQueryParams.pageSize, // 保持 pageSize
        ordersNumber: "",
        storageNumber: "",
        purchaseBatchNumber: "",
        inboundTime: "",
        minDays: this.currentStockAgeRange.minDays,
        maxDays: this.currentStockAgeRange.maxDays,
        productId: this.currentStockAgeProductId,
      };
      this.getStockAgeList();
    },

    /** 处理库龄弹窗分页变化 */
    handleStockAgePageChange(page) {
      this.stockAgeQueryParams.pageNum = page;
      this.getStockAgeList();
    },

    //预留量/锁定量变动记录
    clickLogDialog(row) {
      this.titleLogDialog = "预留量/锁定量变动记录";
      this.openLogDialog = true;
      this.getReservedList(row);
    },
    getReservedList(row) {
      this.logDialogloading = true;
      this.logDialogQueryParams.sku = row.sku;
      this.logDialogQueryParams.warehouseId = row.warehouseId;
      getReservedList(this.logDialogQueryParams).then((response) => {
        this.reservedList = response.rows;
        this.totalLogDialog = response.total;
        this.logDialogloading = false;
      });
    },
  },
};
</script>

<style scoped>
/* .image-container {
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  margin-right: 5px;
} */

.dialog-footer {
  text-align: right;
}

/* 可选：调整弹窗标题的样式 */
.el-dialog__header {
  background-color: #f5f5f5;
}

/* 可选：调整表格行的间距 */
.el-table .el-table__row {
  height: 40px;
}

.text-green {
  color: green;
}

.text-red {
  color: red;
}

.textdecoration {
  text-decoration: underline;
}
</style>
